@include ('user.header', ['title' => '编辑域名'])
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
      <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="/user">用户中心</a></li>
          <li class="breadcrumb-item"><a href="/user/forward-list">我的转发</a></li>
          <li class="breadcrumb-item active">修改转发-{{$forword['domain']}}</li>
      </ol>
  </div>
</nav>
  <div class="container py-4">
    <div class="row">
      <div class="col-12 col-md-8 mx-auto">
        @if ( session('status') )
          <div class="alert alert-{{ session('status') == '1' ? 'success' : 'warning' }} alert-dismissible fade show" role="alert">
            <strong>{{ session('msg') }}</strong>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        @endif

        @if (isset($forword))
        <div class="card shadow-sm mb-3">
          <div class="card-body p-3">
            <form action="/api/forward/edit/{{$forword['id']}}" method="post" class="needs-validation" novalidate id="editForm">
              @csrf
              <input type="hidden" name="api_token" value="{{session('user')->api_token}}">

              <!-- 域名字段 -->
              <div class="mb-3">
                <label for="domain" class="form-label fw-bold">域名</label>
                <input type="text" value="{{ $forword['domain'] }}" class="form-control" readonly disabled="disabled">
              </div>

              <!-- 类型选择 -->
              <div class="mb-3">
                <label for="mode" class="form-label fw-bold">类型</label>
                <select name="mode" id="mode" class="form-select">
                  <option value="0" @if ($forword['mode'] == '0') selected @endif>显性转发</option>
                  <option value="1" @if ($forword['mode'] == '1') selected @endif>隐性转发</option>
                  <option value="2" @if ($forword['mode'] == '2') selected @endif disabled>页面停放</option>
                </select>
              </div>

              <!-- 目标地址 -->
              <div class="mb-3">
                <label for="url" class="form-label fw-bold">目标地址</label>
                <input type="url" name="url" id="url" value="{{ $forword['url'] }}" class="form-control" placeholder="如：http://www.ll00.cn" required>
              </div>

              <!-- 页面标题 -->
              <div class="mb-3">
                <label for="title" class="form-label fw-bold">页面标题</label>
                <input type="text" name="title" id="title" value="{{ $forword['title'] }}" class="form-control" placeholder="如：零零工具站">
              </div>

              <!-- 关键字 -->
              <div class="mb-3">
                <label for="keywords" class="form-label fw-bold">关键字</label>
                <input type="text" name="keywords" id="keywords" value="{{ $forword['keywords'] }}" class="form-control" placeholder="如：在线工具,网站工具,站长工具">
              </div>

              <!-- 页面描述 -->
              <div class="mb-3">
                <label for="description" class="form-label fw-bold">页面描述</label>
                <input type="text" name="description" id="description" value="{{ $forword['description'] }}" class="form-control" placeholder="如：零零工具站是一个在线工具站，为所有访客提供快捷方面的...">
              </div>

              <!-- 停放页面 -->
              <div class="mb-3">
                <label for="park" class="form-label fw-bold">停放页面</label>
                <select name="park" id="park" class="form-select">
                  <option value="default.html">默认页面</option>
                </select>
              </div>

              <!-- 提交按钮 -->
              <div class="d-grid gap-2 mt-4">
                <button type="submit" class="btn btn-primary btn-sm rounded-pill py-2 fs-6 shadow-sm">
                  <i class="bi bi-save me-1"></i>保存更改
                </button>
              </div>
            </form>
          </div>
        </div>
        @endif
      </div>

      <!-- 说明栏 -->
      <div class="col-12 col-md-4">
        <div class="card shadow-sm mb-3">
          <div class="card-body p-3">
            <p><span class="bi bi-info-circle-fill text-primary me-1"></span> 使用前，请先把域名解析到以下服务器中的任意一个服务器！</p>
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>记录类型</th>
                  <th>记录值</th>
                </tr>
              </thead>
              <tbody>
                {!!admin_setting('domain_jx')!!}
              </tbody>
            </table>
            <hr/>
            <b>显性转发</b><br/>
            当访客访问您的域名时，直接跳转至您所指定的网址<hr/>
            <b>隐性转发</b><br/>
            当访客访问您的域名时，会显示您所指定的网址的内容，并且地址栏的网址不会发生变化
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* 表单控件增强样式 */
    .form-control, .form-select {
      border-radius: 0.4rem;
      border-width: 1.5px;
      padding: 0.5rem 0.75rem;
      transition: all 0.2s ease-in-out;
      font-size: 0.875rem;
    }
    
    /* 卡片容器微动效 */
    .card {
      transition: transform 0.3s ease;
    }
    
    .card:hover {
      transform: translateY(-3px);
    }
  </style>

  <script>
    $(document).ready(function() {
      // 初始化字段显示
      function initializeFormFields() {
        let mode = $("#mode").val() || '0';
        
        // 重置所有字段状态
        $(".mb-3").show().find("input, select").prop("disabled", false);
        
        switch(mode) {
          case '0': // 显性转发
            $("#url").closest(".mb-3").nextAll().hide()
                     .find("input, select").prop("disabled", true);
            break;
          case '1': // 隐性转发
            $("#url").prop("required", true);
            $("#title, #keywords, #description").prop("required", false);
            $("#park").closest(".mb-3").hide()
                      .find("select").prop("disabled", true);
            break;
          case '2': // 停放页面
            $("#park").prop("required", true);
            $("#url, #title, #keywords, #description").closest(".mb-3").hide()
                     .find("input, select").prop("disabled", true);
            break;
        }
      }

      // 首次初始化
      initializeFormFields();
      
      // 监听模式变化
      $("#mode").change(function() {
        initializeFormFields();
      });

      // 表单提交处理
      $('#editForm').submit(function(event) {
        event.preventDefault();
        
        var formData = $(this).serialize();

        $.ajax({
          url: $(this).attr('action'),
          type: 'POST',
          data: formData,
          success: function(response) {
            if (response.status == '1') {
              $('.alert').remove();
              $('#editForm').before(`
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  <strong>${response.msg}</strong>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              `);
            } else {
              $('.alert').remove();
              $('#editForm').before(`
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                  <strong>${response.msg}</strong>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              `);
            }
          },
          error: function(xhr) {
            $('.alert').remove();
            $('#editForm').before(`
              <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong>请求失败，请稍后重试</strong>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            `);
          }
        });
      });
    });
  </script>

@include('user.footer')